<script setup lang="ts">
import {computed, ref} from "vue";
import {list} from '@/api/dictdata'
import {onLoad, onReady, onShow} from "@dcloudio/uni-app";
import {page,tree} from "@/api/appmenu";
import {baseUrl} from "@/api/request";
import {save,count} from "@/api/menuorder";
const previewImageBtn=(url)=>{
  uni.previewImage({
    urls: [url],
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function(data) {
        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
      },
      fail: function(err) {
        console.log(err.errMsg);
      }
    }
  });
}
const shopId=ref()
onShow(()=>{
	uni.getStorage({
	 key:'shopId',
	 success: function (res)  {
		 console.log(11111,res.data)
		 if(res.data){
	   shopId.value= parseInt(res.data);
	   getTree(parseInt(res.data))
		 }
	 },
    fail:function (res) {
    }
	})
})
const treelist=ref([])
const getTree=(shopId)=>{
	tree({"shopId":shopId}).then(res=>{
		treelist.value=res.data
		cartList.value=[]
		uni.getStorage({
		  key: 'cartList',
		  success: function (res2) {
		    cartList.value=res2.data
			console.log("你好",cartList.value)
		    if (cartList.value.length && cartList.value.length > 0){
		      cartList.value.forEach(cart=>{
		        treelist.value.forEach(menu=>{
					if(menu.childrens){
						menu.childrens.forEach(child=>{
							if (cart.id === child.id){
								console.log(22222221111111,cart.id,cart.quantity)
							  child.quantity=cart.quantity;
							  return;
							}
						})
					}
		        })
		      })
		    }
		  },
		  fail: function (res2) {
		    console.log("err:"+JSON.stringify(res2))
		  }
		});
		uni.getStorage({
		  key:'chartHj',
		  success:function (res3){
		    heji.value = res3.data;
		  }
		})
	})
}

const styles=ref(
    {
      color: 'black',
      borderColor: '#BBBBBB',
      backgroundColor:'white',
    }
)
const menuShow = ref(false)
const openMenu=()=>{
  menuShow.value=!menuShow.value;
}
const clickIndex = ref(0)

//添加购物车
const cartList = ref([])
const heji=ref(0)
const addCartBtn=(item)=>{
  if(!cartList.value || cartList.value instanceof Object){
	 cartList.value=[]
  }
  item.quantity=1;
  item.total=item.price*item.quantity
  cartList.value.push(item)
  heji.value=0;
  cartList.value.map(item=>{
    heji.value=heji.value+item.price*item.quantity
  })
  uni.setStorage({
    key:'cartList',
    data:cartList
  })
  uni.setStorage({
    key:'chartHj',
    data:heji.value
  })
}
const removeCart=(item)=>{
  item.quantity=0;
  item.total=item.price*item.quantity
  cartList.value.splice(cartList.value.indexOf(item),1)
  heji.value=0;
  cartList.value.map(item=>{
    heji.value=heji.value+item.price*item.quantity
  })
  if(cartList.value.length>0){
    uni.setStorage({
      key:'cartList',
      data:cartList.value
    })
  }else{
    uni.removeStorage({key:'cartList'})
  }

  if (heji.value > 0){
    uni.setStorage({
      key:'chartHj',
      data:heji.value
    })
  }else{
    uni.removeStorage({key:'chartHj'})
  }

}
const iconClick=(item,type)=>{
  if (type == 'prefix'){
    if(item.quantity > 1){
      item.quantity--;
    }else{
      item.quantity=1;
    }
  }else if (type == 'suffix'){
    item.quantity++;
  }
  item.total=item.price*item.quantity
  heji.value=0;
  cartList.value.map(item=>{
    heji.value=heji.value+item.price*item.quantity
  })

  if(cartList.value.length>0){
    uni.setStorage({
      key:'cartList',
      data:cartList.value
    })
  }else{
    uni.removeStorage({key:'cartList'})
  }

  if (heji.value > 0){
    uni.setStorage({
      key:'chartHj',
      data:heji.value
    })
  }else{
    uni.removeStorage({key:'chartHj'})
  }

}


const addMenuOrder=()=>{
  cartList.value.forEach(item=>{
    const form={
      menuId:item.id,
      quantity:item.quantity,
      price:item.price,
      total:item.total,
	  orderStatus:'0'
    }
    save(form).then(res=>{
      if (res.code==200){
        uni.removeStorage({key:'cartList'})
        uni.removeStorage({key:'chartHj'})
        cartList.value=[]
        heji.value=0;
        searchParam.value.page=1;
        getMenu()
      }
    })
  })
  noPayNum()
}
//获取未付款订单数量
const noPayNum=()=>{
  //未付款订单显示小红点
  count({"orderStatus":"0"}).then(res=>{
    if(res.code == 200){
      if (res.data > 0){
        uni.setTabBarBadge({
          index:2,
          text:res.data+'',
        })
      }else{
        uni.removeTabBarBadge({
          index:2
        })
      }
    }
  })
}
const removeChartAll=()=>{
  cartList.value.map(item=>{
    item.quantity=0;
    item.total=item.price*item.quantity
    heji.value=heji.value+item.price*item.quantity
  })
  uni.removeStorage({key:'cartList'})
  cartList.value =[]
  heji.value=0;
  getTree(shopId.value);
}
const currentValue=ref(0)
const list=ref([])
const chain=ref(false)
const height=computed(()=>{
	return uni.getSystemInfoSync().windowHeight-uni.upx2px(100)
})
const list2=computed(()=>{
	const _list = treelist.value[currentValue.value]?.childrens;
	return _list ? _list : [];
}) 
const change=(index)=> {
	currentValue.value = index;
}
</script>

<template>
<view class="uni-container-classic">
  <view class="uni-cell">
    <image src="/static/icon/dao.png" class="menu-icon" mode="aspectFit"/>
    <text class="chooseMenu">选菜</text>
  </view>
  <view>
	<uv-vtabs 
		:chain="chain"
		:list="treelist"
		:barItemBadgeStyle="{right:'20px',top:'12px'}"
		@change="change">
		<uv-vtabs-item>
			<view 
				class="item choose-menu"
				v-for="(item2,index2) in list2"
				:key="index2">
			  <image  @click="previewImageBtn(baseUrl+item2.menuImg)"  :src="baseUrl+item2.menuImg" mode="aspectFill" class="menu-img"></image>
			  <view class="menu-detail">
				<text>{{item2.menuName}}</text>
				<text style="font-weight:normal;font-size: 12px;color: gray;">{{item2.price}} 元/份</text>
			  </view>
			  <image @click="addCartBtn(item2)"  class="cart-icon"
					 mode="scaleToFill" src="/static/icon/cartadd.png" v-if="!item2.quantity || item2.quantity == 0"
					 style="width: 25px;height: 25px;"></image>
			  <image  @click="openMenu" class="cart-icon"
					  mode="scaleToFill"
					  src="/static/icon/cartplus.png"  v-if="item2.quantity > 0"
					  style="width: 25px;height: 25px;"></image>
			  <view  v-if="item2.quantity"  class="dot-red">{{item2.quantity}}</view>
			</view>
		</uv-vtabs-item>
	</uv-vtabs>
  </view>
  {{cartList}}
  <view class="uniui-bottom"  v-if="cartList.length > 0">
    <view class="choose-menu-btn" @click="openMenu">
      <text>已选</text>
      <text>菜单</text>
    </view>
    <view class="chart-menu" v-if="menuShow">
      <scroll-view  scroll-y="true" style="height: 100%;">
        <view class="menu-item" v-for="(item,index) in cartList" :index="index" :key="index">
          <image :src="baseUrl+item.menuImg"  class="menu-item-img" mode="aspectFill"></image>
          <text class="menu-text">{{item.menuName}}</text>
          <view class="menu-input">
            <uni-easyinput  v-model="item.quantity"   @iconClick="iconClick(item,$event)" suffix-icon="arrow-up" prefix-icon="arrow-down" type="number"
                            style="text-align: center;"></uni-easyinput>
          </view>
          <text  class="menu-text">合计：{{item.total}}</text>
          <uni-icons @click="removeCart(item)" color="#665c37" type="trash"></uni-icons>
        </view>
      </scroll-view>
      <view class="menu-foot">
        <text style="font-size: 16px;font-weight: bolder">合计：{{heji}} 元</text>
        <view class="menu-botton">
          <button size="mini" class="menu-botton-btn"  @click="addMenuOrder">
            <uni-icons color="#4095E5" type="wallet"></uni-icons>
            添加订单
          </button>
          <button  size="mini" class="menu-botton-btn" @click="removeChartAll">
            <uni-icons color="#D1BF70" type="trash"></uni-icons>
            清空
          </button>
        </view>
      </view>
    </view>
  </view>

</view>
</template>

<style scoped lang="scss">
.header {
	padding: 30rpx;
	font-size: 30rpx;
	color: #333;
}
.item {
	padding: 10rpx 20rpx;
	&-title {
		.text {
			font-weight: 700;
			font-size: 32rpx;
			color: #111;
		}
	}
	&-content {
		padding: 20rpx 0;
		.text {
			line-height: 48rpx;
			font-size: 30rpx;
			color: #111;
			/* #ifndef APP-NVUE */
			word-break: break-all;
			/* #endif */
		}
	}
}
.gap {
	padding: 0 30rpx;
}	
.menu-botton-btn{
 background-color: #bce2ff;
 border-color: #bce2ff;border: 1px solid #bce2ff;
 font-weight: bolder;
}
.menu-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color:#B5A74F;
  margin-top: 5px;
  margin-bottom: 3px;
  font-size: 14px;
}
.menu-botton{
  display: flex;
  align-items: center;
}
.menu-botton button{
  margin-right: 10px;
  color:#B5A74F;
  font-weight: bolder;
  font-weight: bolder;
  font-size: 12px;
  margin-left: 5px;
}
.menu-item{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 14px;
  font-weight: normal;
  color:black;
  margin-bottom: 8px;
}
.menu-text{
  width: 25%;text-align: center;
}
.menu-input{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 35%;
}
.menu-item-img{
  width: 20%;
  height: 10vh;
  border-radius: 2px;
}
.chart-menu{
  background-color:  white;
  height: auto;
  padding: 10px;
  border-radius: 2px;
  line-height: 25px;
}
.choose-menu-btn{
  background-color: #caa125;
  width: 35px;
  height: 35px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  border-radius: 50%;
  font-size: 12px;
  color:white;
  border: 2px solid #caa125;
  justify-content: center;
  margin-left: 42%;
}
.uniui-bottom{
  position: sticky;
  bottom: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.uni-cell-content{
  display: flex;
  //height: 79vh;
  height:calc(100vh - 10vh);
}
.uni-cell-left{
  width: 35%;
  background-color: #5A5127;
  text-align: center;
  padding-bottom: 5px;
}
.chooseMenu-title{
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: normal;
  color: #FFFFFF;
}
.uni-cell-right{
  width: 65%;
}
.choose-menu{
  width: 100%;
  display: flex;
  // background-color: ghostwhite;
  height: 12%;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  position: relative;
  margin-bottom: 1px;
}
.choose-menu .cart-icon{
  position: absolute;
  bottom: 3%;
  right: 25px;
}
.choose-menu .dot-red{
  position: absolute;
  bottom: 17%;
  right: 6%;
  color: white;
  font-size: 12px;
  flex-direction: column;
  width: 14px;
  height: 14px;
  background-color: #D04E20;
  text-align: center;
  border-radius: 50%;
}

.menu-img{
  width: 120px;
  height: 100px;
  border-radius: 5px;
}
.menu-detail{
  height: 100%;
  min-height: 50px;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // align-items: center;
  margin-left: 8px;
}
.menu-detail text{
  color: #566B4C;
  font-size: 14px;
  font-weight: bolder;
}
.menu-icon{
  width: 24px;
  height: 24px;
  margin-left: 25px;
}
.uni-cell{
  height: 10vh;
  background-color: #e2e2e2;
  display: flex;
  align-items: center;
  position: relative;
}
.uni-container-classic{
  background-color: #C9B9AA;
  width: 100%;
  height: 100%;
  display: flex; /* 使用flex布局可能有助于高度分配 */
  flex-direction: column; /* 垂直方向排列子元素 */
  position: relative;
}
.chooseMenu{
  color: white;
  position: absolute;
  left: 45%;
}
</style>